<template>
	<view class="bg-gray1">
		<cu-custom :bgColor="'bg-' + theme.backgroundColor" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">商品分类</block>
		</cu-custom>
		<view class="" style="position: sticky;z-index: 9;" :style="{top:CustomBar+'px'}" id="g_Search">
			<view class="">
				<div-search></div-search>
			</view>
		</view>
		<view class="verticalbox flex">
			<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="Top"
				:style="{height:`calc(100vh - 30rpx - ${goodsSearch}px)`}">
				<view :class="'cu-item ' + (index==TabCur?'cur text-'+theme.themeColor:'')"
					v-for="(item, index) in goodsCategory" :key="index" @click="tabSelect(item,index)">
					{{item.name}}
				</view>
			</scroll-view>
			<scroll-view class="verticalmain" scroll-y scroll-with-animation :style="{height:`calc(100vh - 30rpx - ${goodsSearch}px)`}"
				:scroll-into-view="'main-' + MainCur" @scroll="VerticalMain">
				<view class="padding-tb-xs padding-lr-sm" v-for="(item, index) in goodsCategory" :key="index"
					:id="'main-' + index">
					<view class="cu-bar bg-white">
						<view class="action">
							<text class="cuIcon-titles" :class="'text-'+theme.themeColor"></text><text
								class="text-df">{{item.name}}</text>
						</view>
					</view>
					<view class="cu-bar bg-white solid-bottom">
						<view class="cate-list flex flex-wrap">
							<!-- <image v-if="item.picUrl" class="img-banner radius" :src="item.picUrl"
								@click="jumpPage(item.page)"></image> -->
							<view v-if="item.children&&item.children.length" v-for="(item2, index2) in item.children"
								:key="index2" class="cate text-xs text-center">
								<navigator hover-class="none"
									:url="'/pages/goods/goods-list/index?categorySecond=' + item2.id + '&title=' + item2.name">
									<image class="cate-img"
										:src="item2.picUrl ? item2.picUrl : '/static/image/no_pic.png'">
									</image>
									<view class="cate-type text-sm">{{item2.name}}</view>
								</navigator>
							</view>
							<view class="padding response text-center" v-if="!item.children">暂无数据</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import api from 'utils/api'

	import divSearch from "@/components/search-model/search-model.vue";

	export default {
		name: 'goods-category',
		data() {
			return {
				CustomBar: this.CustomBar,
				theme: app.globalData.theme, //全局颜色变量
				TabCur: 0,
				MainCur: 0,
				VerticalNavTop: 0,
				goodsCategory: [], // 分类
				load: true,
				goodsSearch: 0, // 顶部标题+搜索栏 高度
			}
		},
		onLoad(options) {
			app.initPage().then(res => {});
		},
		onShow() {
			this.goodsCategoryTree()
		},
		onReady() {
			const query = uni.createSelectorQuery().in(this)
			query.select('#g_Search').boundingClientRect(data => {
				this.goodsSearch = data.height + this.CustomBar
			}).exec()
		},
		components: {
			divSearch
		},
		methods: {
			// jumpPage(url){
			// 	if(url){
			// 		uni.navigateTo({
			// 		    url: url
			// 		});
			// 	}
			// },
			goodsCategoryTree() {
				api.goodsCategoryTree({}).then(res => {
					this.goodsCategory = res.data;
				});
			},
			tabSelect(item, index) {
				this.TabCur = index;
				this.MainCur = index;
				this.VerticalNavTop = (index - 1) * 50;
			},
			VerticalMain(e) {
				let that = this;
				let list = this.goodsCategory;
				let tabHeight = 0;

				if (this.load) {
					for (let i = 0; i < list.length; i++) {
						let view = uni.createSelectorQuery().select("#main-" + i);
						view.fields({
							size: true
						}, data => {
							list[i].top = tabHeight;
							tabHeight = tabHeight + data.height;
							list[i].bottom = tabHeight;
						}).exec();
					}

					that.load = false;
					that.goodsCategory = list;
				}

				let scrollTop = e.detail.scrollTop + 20;

				for (let i = 0; i < list.length; i++) {
					if (scrollTop > list[i].top && scrollTop < list[i].bottom) {

						that.VerticalNavTop = (i - 1) * 50;
						that.TabCur = i;
						return false;
					}
				}
			}
		}
	}
</script>

<style scoped>
	.verticalbox {
		padding-top: 10rpx;
	}

	.verticalbox .VerticalNav {
		padding-top: 10rpx;
		padding-left: 10rpx;
	}


	.VerticalNav.nav {
		width: 220rpx;
		white-space: initial;
	}

	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;
		background-color: #fff;
		margin: 0;
		border: none;
		height: 50px;
		position: relative;
		line-height: inherit;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* #ifdef MP-ALIPAY */
	.search-form {
		display: flex;
	}

	.search-form .response {
		align-self: baseline;
	}

	/* #endif */

	.VerticalNav.nav .cu-item.cur {
		background-color: #f1f1f1;
	}

	.VerticalNav.nav .cu-item.cur::after {
		content: "";
		width: 8rpx;
		height: 30rpx;
		border-radius: 10rpx 0 0 10rpx;
		position: absolute;
		background-color: currentColor;
		top: 0;
		right: 0rpx;
		bottom: 0;
		margin: auto;
	}





	.img-banner {
		width: 94%;
		height: 148rpx;
		margin: auto;
	}

	.cate-list {
		width: 100%;
	}

	.cate {
		width: 150rpx;
		margin: 15rpx;
	}

	.cate-img {
		width: 140rpx;
		height: 140rpx;
	}
</style>